<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>可视化界面</title>
  <link rel="stylesheet" href="./layui/css/layui.css">
  <script src="./layui/layui.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">监控平台</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;" id="Time">
          时间
        </a>
      </li>
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;" id="weather">
          天气
        </a>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item">
          <a class="" href="javascript:;">异常监控</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" onclick="jsError()">js异常</a></dd>
            <dd><a href="javascript:;" onclick="promiseError()">promise异常</a></dd>
            <dd><a href="javascript:;" onclick="blankError()">白屏异常</a></dd>
            <dd><a href="javascript:;" onclick="apiError()">接口异常</a></dd>
            <dd><a href="javascript:;" onclick="resourceError()">资源加载异常</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" onclick="performance_monitor()">性能界面</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">用户行为页面</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" onclick="pv()">pv</a></dd>
            <dd><a href="javascript:;" onclick="uv()">uv</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" onclick="request()">HTTP请求</a>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body"><iframe id = "iframe"  src="./具体界面/欢迎界面.html" ></iframe></div>
</div>

<script>
  
  //修改时间
  setInterval(function(){
    var Time = document.getElementById('Time');
    Time.innerHTML = new Date().toLocaleString();
  },1000);
  //修改天气
  var weather = document.getElementById('weather');
  //通过http://wthrcdn.etouch.cn/weather_mini?city=北京，获取天气
  var xmlHttp = new XMLHttpRequest();
  xmlHttp.open("GET","http://wthrcdn.etouch.cn/weather_mini?city=北京",true);
  xmlHttp.send();
  xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
      var data = JSON.parse(xmlHttp.responseText);
      console.log(data);
      form = data.data.city + " " + data.data.forecast[0].type + " " + data.data.wendu + "℃";
      weather.innerHTML = form;
    }
  }

  function jsError() {
    document.getElementById("iframe").src = "./具体界面/js异常.html";
  }
  function promiseError() {
    document.getElementById("iframe").src = "./具体界面/promise异常.html";
  }
  function blankError() {
    document.getElementById("iframe").src = "./具体界面/blank异常.html";
  }
  function apiError() {
    document.getElementById("iframe").src = "./具体界面/api异常.html";
  }
  function resourceError() {
    document.getElementById("iframe").src = "./具体界面/resource异常.html";
  }
  function performance_monitor() {
    document.getElementById("iframe").src = "./具体界面/性能界面.html";
  }
  function pv() {
    document.getElementById("iframe").src = "./具体界面/pv.html";
  }
  function uv() {
    document.getElementById("iframe").src = "./具体界面/uv.html";
  }
  function request() {
    document.getElementById("iframe").src = "./具体界面/HTTP请求.html";
  }
</script>
<style>
  #iframe{
    width: 100%;
    height: 100%;
    margin: auto;
  }
  .layui-body{
    height: 100%;
    margin: 0;
  }
</style>






</body>
</html>